import { G2, Chart, Coordinate, Legend, Interval, Axis, Interaction } from 'bizcharts';
import data from '../../../../public/data';

const cols = {
  percent: {
    formatter: (val) => {
      const vals = (val * 100).toFixed(0) + '%';
      console.log('vals', vals);
      return vals;
    },
  },
};

const PropertyPie = (props) => {
  return (
    <>
      <Chart height={400} data={data.propertyPieData} autoFit scale={cols}>
        <Coordinate type="theta" radius={0.75} />
        <Axis visible={false} />
        <Legend
          position="right"
          maxItemWidth={240}
          offsetX={-15}
          itemName={{ style: { fill: 'white' } }}
        />
        <Interval
          position="percent"
          adjust="stack"
          color={['name', ['#2aaaef', '#5AD8A6', '#26ccd8', '#73abf5', '#3cb9fc']]}
        />
        <Interaction type="element-single-selected" />
      </Chart>
      <p
        style={{
          fontSize: '16px',
          color: 'white',
          textIndent: '2em',
          marginTop: '20px',
          padding: '0 15px',
        }}
      >
        2021全年，昆明主城区及呈贡区不同物业的成交面积占比如上图所示。其中，住宅的成交面积占比远远大于其余物业类型，而占比最小的物业类型为
        {data.propertyPieData[data.propertyPieData.length - 1].name}。
      </p>
    </>
  );
};
export default PropertyPie;
